// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';
import Swiper from 'react-native-swiper';

// antd 按需加载
import { Tabs, Toast, Portal, Grid } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { rotationChart } from '../../../module/module.js'

// 引入样式
import Style from '../style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RnFlatList, RefreshScrollView } from '../../../components/index.js'

// 引入专用组件
import { HomeGood } from '../components'

// 引入工具包
import { u197, background } from '../../../util/images.js'
import { press, size, ScreenWidth, borderBottom, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../../util/utils.js'

class MallHome extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      searchBackgroundColor: '#ccc',
      loading: false,
      banner: [],
      swiperIndex: 0
    }
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步的任务...
      this.showLoadingData()
    });
  }

  showLoadingData() {
    this.loading = Toast.loading('加载中', 0)
    this.loadingData().finally(() => {
      Portal.remove(this.loading)
    })
  }

  loadingData(options) {
    const { id } = this.props
    return Promise.all([rotationChart({ location: 1 })]).then(res => {
      this.setState({
        banner: res[0].data
      })
    })
  }

  onRefresh = () => {
    const { } = this.props
    this.setState({ refreshing: true });
    this.loadingData().finally(() => {
      this.setState({
        refreshing: false
      })
    })
  }



  render() {
    const { refreshing, banner } = this.state
    const { categoryList } = this.props
    const height = ScreenWidth / 700 * 350
    return (
      <RefreshScrollView
        style={Style.content}
        refreshing={refreshing}
        onRefresh={this.onRefresh}
      >
        <Swiper
          style={{ height }}
          autoplay={true}
          // index={swiperIndex}
          autoplayTimeout={2}
          onMomentumScrollEnd={(e, state, context) => {
            // this.setState({ swiperIndex: state.index })
          }}
          dot={<View style={{ backgroundColor: 'rgba(0,0,0,.2)', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
          activeDot={<View style={{ backgroundColor: '#000', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
          paginationStyle={{
            bottom: 10
          }}
        >
          {banner.map((item, index) => {
            console.log(`${pathHead}${item.source}`)
            return (
              <TouchableOpacity key={index}>
                <View style={{ flex: 1 }}>
                  <Image resizeMode='cover' style={{ width: ScreenWidth, height }} source={{ uri: `${pathHead}${item.source}` }} />
                </View>
              </TouchableOpacity>
            )
          })}
        </Swiper>
        <View style={{ backgroundColor: '#fff', paddingVertical: 10 }}>
          <Grid
            itemStyle={{ height: 65 }}
            data={[
              {
                icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../../static/images/wodedizhi.png')} />,
                text: '我的帖子'
              },
              {
                icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../../static/images/wodeshouceng.png')} />,
                text: '我的收藏'
              },
              {
                icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../../static/images/wodefensi.png')} />,
                text: '我的粉丝'
              },
              {
                icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../../static/images/wodedianzan.png')} />,
                text: '我的点赞'
              },
              {
                icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../../static/images/guanzhuderen.png')} />,
                text: '关注的人'
              },
              {
                icon: <Image resizeMode='cover' style={{ width: 22, height: 22 }} source={require('../../../static/images/guanzhudebankuai.png')} />,
                text: '关注的板块'
              },
            ]}
            columnNum={4}
            hasLine={false}
            onPress={(el, index) => {
              if (index == 0) {
                // 我的帖子
                Actions.cardMyList()
              }
              if (index == 1) {
                // 我的收藏
                Actions.collectionCard()
              }
              if (index == 2) {
                // 我的粉丝
                Actions.fansList()
              }
              if (index == 3) {
                // 我的点赞
                Actions.likeCard()
              }
              if (index == 4) {
                // 关注的人
                Actions.followAccount()
              }
              if (index == 5) {
                // 关注的板块
                Actions.followPlate()
              }
            }}
          />
        </View>
        {categoryList.records.map((item, index) => (
          <HomeGood data={item} key={index} />
        ))}
      </RefreshScrollView>
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(MallHome))
